<template>
  <div class="shopcart-container">
    <!-- 收货地址区域 -->
    <van-cell title="收货地址" is-link
      :to="{ name:'addressList',params:{addressId:address.id}}">
      <template #label>
        <van-row>姓名：{{address.name}}</van-row>
        <van-row>电话：{{address.tel}}</van-row>
        <van-row>地址：{{address.city + address.county + address.address_detail}}</van-row>
      </template>
    </van-cell>
    <!-- 商品列表 -->
    <van-card v-for="item in goodsList" :key="item.id" :num="item.count" :price="item.price"
      :title="item.name" :desc="item.title" :thumb="APIDomainName + item.pic" />
    <!-- 配送信息 -->
    <van-cell title="配送服务" label="快递运输,工作日、双休日与节假日均可送货" />
    <van-field v-model="remark" rows="2" autosize label="订单备注" type="textarea" placeholder="请输入订单备注" />
    <!-- 运费信息 -->
    <van-cell title="商品金额" :value="`¥${amount.toFixed(2)}`" />
    <van-cell title="运费" :value="`¥0.00`" />
    <van-cell title="总价" :value="`¥${amount.toFixed(2)}`" />
    <!-- 创建订单按钮 -->
    <van-button @click="OnClickCreateOrder" size="large" type="primary">创建订单</van-button>
  </div>
</template>
<script>
  import {
    createOrderAPI
  } from "@/api/order.js";
  import {
    getDefaultAddressAPI
  } from "@/api/address.js";
  import {
    getCartListCheckedAPI
  } from "@/api/cart.js";
  export default {
    data() {
      return {
        goodsList: [],
        remark: "",
        amount:0,
        address: {},
      };
    },
    created() {
      if (this.$route.params.addressId) {
        //通过路由名 addressList 转来的
        this.address.id = this.$route.params.addressId;
      }
      this.initDefaultAddress();//初始默认收货地址
      this.initCartListByChecked();//初始订单商品（购物车勾选商品）
    },
    methods: {
      //初始订单商品（购物车勾选商品）
      initCartListByChecked() {
        getCartListCheckedAPI().then(result => {
          this.goodsList = result.data;
          this.amount = 0;
          this.goodsList.forEach((item) => {
            this.amount += item.count * item.price;
          });
        });
      },
      //初始默认收货地址
      initDefaultAddress() {
        getDefaultAddressAPI(this.address.id).then(result => {
          if (result.data.length == 1) {
            this.address = result.data[0];
          } else {
             //如果没有默认收货地址，提示后导航到地址列表页面（该页面还未实现）
            this.$toast("请先添加收货地址");
            this.$router.replace({
              name: "addressList",
              params:{addressId:9999999999}
            });
          }
        });
      },
      //处理创建订单
      OnClickCreateOrder() {
        let productList = [];
        this.goodsList.forEach((item) =>
          productList.push({
            product_id: item.product_id,
            count: item.count,
            price: item.price,
          })
        );
        //根据接口文档，准备接口参数
        let params = {
          address_id: this.address.id,          
          productList: productList,
          remark: this.remark,
        };      
        createOrderAPI(params).then(result => {
          this.$toast(result.msg);
          //创建成功后导航到订单列表页面（该页面还未实现）
          this.$router.push({name:"orderList"});
        });
      },
    },
  };
</script>
<style lang="less" scoped>
  .shopcart-container {
    display: flex;
    flex-direction: column;
    background: #eee;
    overflow: hidden;
    // 收货地址
    .address-container {
      background-color: #f5f5f5;
      margin: 0;
      padding: 10px;
    }
  }
  .van-card__title {
    font-size: 16px;
  }
</style>